<template>
  <div class="form-relation-config">
    <FormRelationChart
      @editRelations="editRelations"
      @selectForm="formId => $emit('selectForm', formId)"
      @editForm="editForm" @addNew="() => $refs.AddRelationModal.open()"
      :formDefinition="formDefinition"/>
    <AddRelationModal @addNewRelation="addNewRelation" ref="AddRelationModal"/>
    <DrawerRelationListEditor
      @refreshFormDefinition="$emit('refreshFormDefinition')"
      :formDefinition="formDefinition" ref="DrawerRelationListEditor"/>
  </div>
</template>
<script>
import {createProps} from '@/utils';
import AddRelationModal from '@comp/hhd/design/relation/AddRelationModal.vue';
import DrawerRelationListEditor from '@comp/hhd/design/relation/DrawerRelationListEditor.vue';
import {createFormDefinition} from '@comp/hhd/design/FormDesigner/types';
import {openWindow} from '@/utils/WindowUtils';
import FormRelationChart from '@comp/hhd/design/relation/FormRelationRender/FormRelationChart.vue';

export default {
  name: 'FormRelationConfig',
  components: {
    FormRelationChart, DrawerRelationListEditor, AddRelationModal
  },
  props: {
    formDefinition: createProps(Object, createFormDefinition),
    selectedFormDefinitionId: createProps(String)
  },
  methods: {
    addNewRelation() {
      this.$refs.DrawerRelationListEditor.addNewRelation();
    },
    editRelations(targetFormId) {
      this.$refs.DrawerRelationListEditor.editRelations({
        sourceFormId: this.formDefinition.id,
        targetFormId,
      });
    },
    editForm(formId) {
      openWindow(() => ['components/hhd/design/FormManager/FormManager', {
        props: {formId}
      }], {
        title: `编辑 - ${this.formDefinition.formName}`,
        key: `editFormDefinition`,
        close: () => {
          this.loadFormList();
        }
      });
    },
  },
};
</script>
<style>
.form-relation-config {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
}
</style>